<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="renderer" content="webkit">
	<meta name="force-rendering" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
	<meta name="robots" content="noindex,nofollow">
	<title>您访问的页面不存在或已删除-{$name}</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			user-select: none
		}

		body,
		html {
			width: 100%;
			height: 100%;
			overflow: hidden
		}

		#ew-moon-star {
			position: absolute;
			left: 0;
			top: 0
		}

		.error {
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			perspective: 500px
		}

		.error>.center {
			transform: rotateX(20deg);
			position: relative;
			width: 60%;
			margin: 0 auto
		}

		.error>.center>.car-banner {
			position: absolute;
			left: 50%;
			top: 40vh;
			z-index: 1000;
			width: 100px;
			transform: translateX(-50%) rotateX(20deg)
		}

		.error>.center img {
			width: 100%;
			height: 100%;
			display: block
		}

		.error>.center>.road {
			width: 100%;
			height: 1346px;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1000
		}

		.error>.center>.road_h_1,
		.error>.center>.road_h_2 {
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-timing-function: linear
		}

		.error>.center>.road_h_1 {
			animation-name: road_h1
		}

		.error>.center>.road_h_2 {
			animation-name: road_h2
		}

		.goback {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%)
		}

		.goback p {
			font: 28px "arial";
			text-align: center;
			color: #535353;
			background-color: #eee;
			padding: 15px;
			border-radius: 15px
		}

		.goback p a {
			text-decoration: none;
			color: #535353
		}

		.goback p a:active,
		.goback p a:hover {
			color: #999
		}

		@keyframes road_h1 {
			0% {
				transform: translate(0, 0)
			}

			50% {
				transform: translate(0, 1336px)
			}

			50.1% {
				transform: translate(0, -1336px)
			}

			100% {
				transform: translate(0, 0)
			}
		}

		@keyframes road_h2 {
			0% {
				transform: translate(0, -1336px)
			}

			50% {
				transform: translate(0, 0)
			}

			100% {
				transform: translate(0, 1336px)
			}
		}

		@media screen and (max-width:765px) {
			.error>.center>.car-banner {
				width: 60px
			}

			.goback p {
				font-size: 12px
			}
		}
	</style>
	<link rel="shortcut icon" href="{$host}zb_users/theme/{$theme}/style/404/car.png" type="image/x-icon">
</head>

<body>
	<canvas id="ew-moon-star"></canvas>
	<div class="error">
		<div class="center">
			<div class="road road_h_1">
				<img src="{$host}zb_users/theme/{$theme}/style/404/errorss.jpg" alt="图片加载中" title="the road">
			</div>
			<div class="road road_h_2">
				<img src="{$host}zb_users/theme/{$theme}/style/404/errorss.jpg" alt="图片加载中" title="the road">
			</div>
			<div class="car-banner">
				<img src="{$host}zb_users/theme/{$theme}/style/404/car.png" alt="图片加载中" title="the car">
			</div>
		</div>
	</div>
	<div class="goback">
		<p>
			你迷路了！ <a href="{$host}">返回首页</a>
		</p>
	</div>
</body>
<script>
	var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
		.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (time) {
			return window.setTimeout(time, 1e3 / 60, (new Date).getTime());
		}();

	function random(max, min) {
		return Math.floor(Math.random() * (max + min - 1) + min);
	}

	function moonAndStar(options) {
		"object" == typeof options && options || console.warn("The best way is that you should pass an object params!");
		const defaultConfig = {
			width: window.innerWidth,
			height: window.innerHeight,
			container: document.body
		};
		let config = this.config = Object.assign(defaultConfig, options);
		this._init(config);
		let context = this;

		function repeatCanvas() {
			context.resetCanvas(), context.createStar(150), context.createMoon(), requestAnimationFrame(repeatCanvas);
		}
		repeatCanvas(), window.onresize = function () {
			config.width = window.innerWidth, config.height = window.innerHeight, context._init(config), repeatCanvas();
		}
	}
	moonAndStar.prototype._init = function (config) {
		const _canvas = document.getElementById("ew-moon-star");
		let canvas = null;
		_canvas ? canvas = _canvas : (canvas = document.createElement("canvas"), canvas.setAttribute("id",
			"ew-moon-star"));
		const ctx = canvas.getContext("2d");
		this.canvas = canvas, this.ctx = ctx, canvas.width = config.width, canvas.height = config.height, _canvas ||
			config.container.appendChild(canvas), this.star = function (x, y, r) {
				return this.x = x, this.y = y, this.r = r, this;
			}, this.stars = [], this.resetCanvas(), this.createStar(200), this.createMoon();
	}, moonAndStar.prototype.createMoon = function () {
		let gradient = this.ctx.createRadialGradient(80, 80, 40, 80, 80, 400);
		[{
			alpha: 0,
			color: "rgb(255,255,255)"
		}, {
			alpha: .01,
			color: "rgb(23,30,38)"
		}, {
			alpha: .2,
			color: "rgb(23,30,38)"
		}, {
			alpha: .4,
			color: "rgb(23,30,38)"
		}, {
			alpha: 1,
			color: "rgb(23,30,38)"
		}].forEach(item => {
			gradient.addColorStop(item.alpha, item.color);
		}), this.ctx.save(), this.ctx.fillStyle = gradient, this.ctx.fillRect(0, 0, 200, 200), this.ctx.restore()
	}, moonAndStar.prototype.resetCanvas = function () {
		this.ctx.clearRect(0, 0, this.config.width, this.config.height), this.ctx.fillStyle = "#171e26", this.ctx
			.fillRect(0, 0, this.config.width, this.config.height);
	}, moonAndStar.prototype.createStar = function (num) {
		let Star = this.star,
			ctx = this.ctx,
			addStars = function (x, y, r) {
				ctx.fillStyle = "#fff", ctx.beginPath(), ctx.arc(x, y, r, 0, 2 * Math.PI), ctx.fill(), ctx.closePath();
			};
		if (this.stars.length)
			for (let j = 0; j < num; j++) this.stars[j].r = random(2, .8), addStars(this.stars[j].x, this.stars[j].y,
				this.stars[j].r);
		else
			for (let i = 0; i < num; i++) {
				let x = Math.random() * this.config.width,
					y = Math.random() * this.config.height,
					r = random(1.5, .4),
					s = new Star(x, y, r);
				addStars(x, y, r), this.stars.push(s);
			}
	};
	new moonAndStar();
</script>

</html>